{include file="public/head" title="订单" keywords="订单" description="订单" /}
<style>
    .jyjl_li > span{
        display: block;
        float: left;
        width: 100%;
        font-size: 16px;
        margin: 1rem 0;
    }
    .qiangdan{
        text-align: center;
        border: 1px solid #01cebf;
        height: 2.5rem;
        line-height: 2.5rem;
        border-radius: 5px;
        color: #01cebf;
    }
    .noqiangdan{

        width: 100%;
        border: 1px solid #01cebf;
        height: 2.5rem;
        line-height: 2.5rem;
        border-radius: 5px;
        color: #01cebf;
    }
    .noqiangdan > span{
        text-align: center;
        float: none;
        height: 2rem;
        line-height: 2rem;
        display: block;
    }
</style>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
    <!-- 菜单容器 -->

    <div class="mui-inner-wrap">
        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper" style="background-color: #fff;">
            <div class="mui-scroll">
                <header class="tx_head">
                    <p>
                        <!--<a href="{:url('index')}" class="header_p1"><span class="mui-icon mui-icon-arrowleft"></span></a>-->
                    <h5>立即抢订单</h5>

                    </p>
                </header>
                <main class="wdzh_main">
                    <section class="wyty_section2 line">
                        <ul class="jyjl_ul">
                            <li class="jyjl_li" style=" height: 1rem;color: #000" >
                                <input type="hidden" name="order_mun" value="{$data[0]['order_mun']}">
                                <!--<span>订单编号：{$data[0]['order_mun']}</span>-->
                                <span>服务内容：
                                {foreach $arr as $v}
                                    {$v}
                                    {/foreach}
                                </span>
                            </li>
                            <li class="jyjl_li" style=" height: 1rem;color: #000">
                                <span>预约时间：{$data[0]['servcietime']|date='Y-m-d H:i:m',###}</span>
                            </li>
                            <li class="jyjl_li" style=" height: 1rem;color: #000">
                                <!--<span>订单时间：{$data[0]['addtime']|date='Y-m-d H:i:m',###}</span>-->
                                <span>联系名称：{$data[0]['name']}</span>
                            </li>
                            <!--<li class="jyjl_li" style=" height: 1rem;color: #000">-->
                                <!--<span>电话：{$data[0]['phone']|phone}</span>-->
                            <!--</li>-->
                            <li class="jyjl_li" style=" height: 1rem;color: #000">
                                <span>服务地址：{$data[0]['addr']|setAddr}....</span>
                            </li>
                            {if !empty($zhuanrang.quxiao_remake)}
                            <li class="jyjl_li" style=" height: auto;color: #000">
                               <span>转让原因： <p style="color: #000">{$zhuanrang.quxiao_remake}</p></span>
                            </li>
                            {/if}
                            <li class="jyjl_li" style=" height: auto;color: #000">
                                <span>备注内容： <p  style="color: #000">{$data[0]['remark']}</p></span>
                            </li>
                            </li>

                            <li class="jyjl_li" >
                                {if empty($data[0]['sevrice_id'])}
                                    {if condition="$xianzhi eq 1"}
                                        <span class="qiangdan"  >接单次数已经用完</span>
                                    {else /}
                                        {if condition='$count eq 0'}
                                            <input type="hidden" name='countDown' data-prefix="距离抢单时间" value="{$time|date='Y/m/d H:i:s',###}">
                                            <p class="noqiangdan" ></p>
                                            <span class="qiangdan" style="display: none" id="qiangdan" >立即抢单</span>
                                        {elseif condition='$count eq 1' /}
                                            <span class="qiangdan"  >完成已接订单后才能抢单</span>
                                        {/if}
                                    {/if}
                                {else /}
                                    <span class="qiangdan"  >您晚了，订单已被抢走！</span>
                                {/if}
                            </li>
                        </ul>

                    </section>
                </main>
                <br>
                <br>
                <br>
            </div>
        </div>
        <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>
{include file="public/footer"}
</body>
<script src="__STATIC__/wap/js/countDown.js"></script>
<script>
    mui('body').on('tap','span',function(){
        var f = $(this).attr('id');
        if (f == 'qiangdan'){
            qiangdan();
        }
    });
    function qiangdan() {
      var order_mun = $("input[name='order_mun']").val();
      $.ajax({
          url:"{:url('todoqiandan')}",
          data:{order_mun:order_mun},
          success:function (res) {
              if (res.code == 1){
                  layer.msg(res.msg, {icon: 1, time: 2000},function () {
                      window.location.href = "{:url('index')}";
                  });
              }else {
                  layer.msg(res.msg, {icon: 5, time: 2000});
              }
          }
      })
    }

    $(function () {

        $("input[name='countDown']").each(function () {
            var time_end=this.value;
            var con=$(this).next("p");
            var _=this.dataset;
            var  timestamp = Date.parse(new Date())/1000;
            var wdate=(new Date(time_end))/1000;
            if (timestamp > wdate){console.log(timestamp)
                $(".noqiangdan" ).css('display','none');
                $('.qiangdan').css('display','block');
                return false;
            }
            countDown(con,{
                title:_.title,//优先级最高,填充在prefix位置
                prefix:_.prefix,//前缀部分
                suffix:_.suffix,//后缀部分
                time_end:time_end//要到达的时间
            })
            //提供3个事件分别为:启动,重启,停止
                .on("countDownStarted countDownRestarted  countDownEnded ",function (arguments) {
                    if (arguments.type == 'countDownEnded'){
                        $('.qiangdan').css('display','block')
                        console.log(arguments.type);
                    }

                });

        });
    });
</script>
</html>